<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-main>
                <div class="mainDiv">
                    <div class="layout">
                        <el-tabs type="border-card">
                            <el-tab-pane label="重置密码">
                                <el-form label-position="right"
                                         label-width="100px"
                                         style="max-width: 460px"
                                         class="loginForm"
                                         ref="loginFormRef"
                                         :model="userFormNormal"
                                         :rules="resetRule"

                                >
                                    <el-form-item label="账号：" prop="username">
                                        <el-input v-model="userFormNormal.username" placeholder="只能是英文字母和数字"/>
                                    </el-form-item>
                                    <el-form-item label="手机号：" prop="phone">
                                        <el-input v-model="userFormNormal.phone" maxlength="11"/>
                                    </el-form-item>
                                    <el-form-item label="新密码：" prop="password">
                                        <el-input type="password" v-model="userFormNormal.password"/>
                                    </el-form-item>


                                    <el-button
                                            type="primary"
                                            class="loginBtn"
                                            @click="resetPsw"
                                    >
                                        重置
                                    </el-button>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    import {reactive,ref} from "vue";
    import {resetPassword} from "@/api/user";
    import {ElMessage} from "element-plus";
    import {useRouter} from 'vue-router'

    const userFormNormal = reactive({username: "", password: "", phone:""});
    const router = useRouter();
    const loginFormRef = ref();
    const resetRule= reactive({
        username: [
            {required: true, message: '请填写账号', trigger: 'blur'},
            {min: 3, max: 10, message: '用户名长度3-10个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "账号只能为英文字母和数字", trigger: 'blur'}
        ],
        password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "密码只能为英文字母和数字", trigger: 'blur'}
        ],
        phone: [{required: true, message: '请填写手机号，用于密码重置', trigger: 'blur'},
            {pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: "请填写正确手机号", trigger: "blur"}]
    })

    const resetPsw = () => {
        loginFormRef.value.validate((valid) => {
            if (valid) {
                resetPassword(userFormNormal).then((res) => {
                    ElMessage.success(res.message)
                    router.push({path:'/login'})
                })
            }
        })
    }
</script>

<style scoped>
    .mainDiv {
        width: 100%;
        height: 91%;
        background-image: linear-gradient(135deg, #C2FFD8 10%, #465EFB 100%);
    }

    .layout {
        position: absolute;
        left: calc(50% - 200px);
        top: 20%;
        width: 400px;
    }

    .loginBtn {
        width: 100px;
    }

    .loginForm {
        text-align: center;
    }

    .checkBox {
        margin-left: 7px;
    }

    .inpWidth {
        width: 165px;
    }
    .resetPasswordDiv{
        font-size: 12px;
        text-align: left;
    }
</style>